<template>
  <div id="app">
	  <!--页面进入之前的加载动画-->
	<div v-loading.fullscreen.lock="$store.state.loading" class="loading"></div>
	  
    <router-view/>
	
	<!-- <div v-if="xian" class="ding" @click="qifei">
		<i class="el-icon-arrow-up"></i>
	</div> -->
	
	<div class="kefu">
		<div class="zhuanshu">
			<img src="./assets/img/kefu.png" />
			<p>专属微信客服</p>
		</div>
		
		<div class="zhuanshu1">
			<img src="./assets/img/kefu.png" />
			<p>关注微信</p>
		</div>
		
		<ul>
			<li>
				<img v-if="gaier" src="./assets/img/gai2.png" />
				<img v-else src="./assets/img/gaigai2.png" />
			</li>
			<li>
				<img v-if="gaier1" src="./assets/img/gai3.png" />
				<img v-else src="./assets/img/gaigai3.png" />
			</li>
			<!-- <li v-if="xian" class="ziding" @click="qifei"><i class="el-icon-arrow-up"></i></li> -->
			<li :class="[xian?'ziding':'zhuzhu']" @click="qifei"><i class="el-icon-arrow-up"></i></li>
		</ul>
	</div>
  </div>
</template>

<script>

	export default {
	  name: 'App',
	  components:{

	  },
	  data(){
		  return{
			  width:'', 
			  curHeight:0,//电脑高度
			  xian:false,
			  gun:'',
			  
			  gaier:true,
			  gaier1:true,
		  }
	  },
	  mounted:function(){
		  //字体根据页面改变而改变
		  this.setRem();
		  //监控屏幕的变化
		 $(window).resize(()=>{ //当浏览器大小变化时
		      this.setRem();
		 });
		 
		 
		 if(this._isMobile()){
			 console.log("移动端")
			 this.$router.replace("/shouji")
		 }else{
			 console.log("pc端")
			 // this.$router.replace(this.$route.path)
		 }
		 
		 //监听页面滚动
		 window.addEventListener('scroll', this.scrollToTop)
		 this.beforeMount();
		 
		 var _self=this;
		 
		 $(".kefu ul li").eq(0).hover(function(){
			 _self.gaier=false;
			  
			$(this).parents("ul").siblings(".zhuanshu").css({
				'width': '2.5rem',
				'padding': '0.3rem 0.5rem',
				'overflow': 'visible'
			})
			$(this).parents("ul").siblings(".zhuanshu").children("p").css({
				'opacity': '1'
			})
			 
		 },function(){
			 _self.gaier=true;
			 
			 $(this).parents("ul").siblings(".zhuanshu").css({
			 	'width': '0rem',
			 	'padding': '0',
			 	'overflow': 'hidden'
			 })
			 $(this).parents("ul").siblings(".zhuanshu").children("p").css({
			 	'opacity': '0'
			 })
			 
		 })
		 $(".kefu ul li").eq(1).hover(function(){
			_self.gaier1=false;
			
			$(this).parents("ul").siblings(".zhuanshu1").css({
				'width': '2.5rem',
				'padding': '0.3rem 0.5rem',
				'overflow': 'visible'
			})
			$(this).parents("ul").siblings(".zhuanshu1").children("p").css({
				'opacity': '1'
			})
			
		 },function(){
			_self.gaier1=true;
			
			$(this).parents("ul").siblings(".zhuanshu1").css({
				'width': '0rem',
				'padding': '0',
				'overflow': 'hidden'
			})
			$(this).parents("ul").siblings(".zhuanshu1").children("p").css({
				'opacity': '0'
			})
			
		 })
		 
		 
	  },
	  watch:{
		  width(val,old){
			  // console.log(12312)
		  },
		  immediate:true
	  },
		beforeRouteLeave(to, form, next){
		  window.removeEventListener('scroll',this.scrollToTop);
		  next();
		},
	  methods:{
		
		  
		//获取屏幕高度
		beforeMount(height) {
		  var h = document.documentElement.clientHeight || document.body.clientHeight;
		  this.curHeight =h;
		},
		//回到顶部
		qifei(){
			
			//让页面回到顶部---效果(滚动动画回到顶部)
			let top = document.documentElement.scrollTop || document.body.scrollTop;
			// 实现滚动效果 
			const timeTop = setInterval(() => {
				document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
				if (top <= 0) {
				  clearInterval(timeTop);
				}
			}, 20);
			
			
			this.scrollToTop();
			
		},
		scrollToTop() { 
			this.gun = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			
			var shu=this.gun+this.curHeight;
			if(shu>this.curHeight){
				this.xian=true;
			}else{
				this.xian=false;
			}
		},
		  
		/*网页字跟随页面自动变化*/
	    setRem(){
		   /*获取当前页面的宽度*/
		   this.width = document.body.offsetWidth;
		   
		   if(this.width<=750){
			   this.$router.replace("/shouji")
		   }
		   
		   // if(this.width>=1000){
			   /*设置页面的字体大小*/
			   var nowFont=this.width/375*8;
			   /*通过标签名称来获取元素*/
			   var htmlFont=document.getElementsByTagName('html')[0];
			   // 给获取到的元素的字体大小赋值
			   htmlFont.style.fontSize =nowFont+"px";
		   // }
	   },
	   //验证是否是移动端
	   _isMobile() {
		 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
		 return flag;
	   }
	  }
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	#app{
		margin: -0.2rem;
		padding: 0;
		font-family: huawen;
		overflow: hidden;
		
			
		.ding{
			border: 1px solid rgba(0,0,0,0.05);
			position: fixed;
			right: 0.3rem;
			bottom: 1rem;
			cursor: pointer;
			background-color: rgba(229,229,229,0.9);
			border-radius:0.2rem ;
			transition: all 1s ease;
			box-shadow: 0 0 0.4rem rgba(0,0,0,0.1);
			
			color: #0091ff;
			font-size: 0.4rem;
			padding: 0.2rem 0.3rem;
		}
		@keyframes jello-diagonal-2 {
		  0% {
			transform: skew(0deg 0deg);
		  }
		  30% {
			transform: skew(-15deg -15deg);
		  }
		  40% {
			transform: skew(5deg, 15deg);
		  }
		  50% {
			transform: skew(-5deg, -5deg);
		  }
		  65% {
			transform: skew(2deg, 2deg);
		  }
		  75% {
			transform: skew(-2deg, -2deg);
		  }
		  100% {
			transform: skew(0deg 0deg);
		  }
		}
		.ding:hover{
			animation: jello-diagonal-2 0.8s both;
			background-color: #0091ff;
			color: #fff;
		}
		
		.kefu{
			position: fixed;
			right: 0rem;
			bottom: 4rem;
			z-index: 999;
			
			.zhuanshu{
				position: absolute;
				left: -4rem;
				top: -1.25rem;
				width: 0rem;
				padding:0;
				text-align: center;
				background-color: #fff;
				border-radius:0.2rem ;
				box-shadow: 0 0 0.3rem rgba(0,0,0,0.3);
				overflow: hidden;
				
				transition: all 1s ease;
				
				img{
					width: 100%;
				}
				p{
					font-size: 0.4rem;
					white-space: nowrap;
					opacity: 0;
					transition: all 3s ease;
				}
			}
			.zhuanshu::after{
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				top: 45%;
				right: -0.3rem;
				border-style: solid;
				border-width: 0.2rem 0 0.2rem 0.3rem;
				border-color: transparent transparent transparent #fff;
			}
			
			.zhuanshu1{
				position: absolute;
				left: -4rem;
				top: -0.2rem;
				width: 0rem;
				padding:0;
				text-align: center;
				background-color: #fff;
				border-radius:0.2rem ;
				box-shadow: 0 0 0.3rem rgba(0,0,0,0.3);
				overflow: hidden;
				
				transition: all 1s ease;
				
				img{
					width: 100%;
				}
				p{
					font-size: 0.4rem;
					white-space: nowrap;
					opacity: 0;
					transition: all 3s ease;
				}
			}
			.zhuanshu1::after{
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				top: 45%;
				right: -0.3rem;
				border-style: solid;
				border-width: 0.2rem 0 0.2rem 0.3rem;
				border-color: transparent transparent transparent #fff;
			}
			
			ul{
				list-style: none;
				font-size: 0.4rem;
				border: 1px solid rgba(0,0,0,0.1);
				box-shadow: 0 0 0.4rem rgba(0,0,0,0.2);
				border-radius:0.2rem ;
				background-color: #fff;
				
				
				li{
					box-sizing: border-box;
					padding: 0.3rem 0.4rem 0.2rem 0.4rem;
					cursor: pointer;
					transition: all 1s ease;
					color: #0091ff;
					background-color: #fff;
					text-align: center;
					
					img{
						width: 0.5rem;
						display: inline;
					}
				}
				li:first-child{
					border-top-left-radius:0.2rem ;
					border-top-right-radius:0.2rem ;
				}
				li:nth-of-type(2){
					border-bottom-left-radius:0.2rem ;
					border-bottom-right-radius:0.2rem ;
				}
				li:last-child{
					border-bottom-left-radius:0.2rem ;
					border-bottom-right-radius:0.2rem ;
				}
				.ziding{
					overflow: hidden;
					transition: all 0.6s ease;
					padding: 0.3rem 0.4rem 0.3rem 0.5rem;
				}
				.zhuzhu{
					padding: 0;
					overflow: hidden;
					transition: all 0.6s ease;
					height: 0;
				}
				li:hover{
					animation: jello-diagonal-2 0.8s both;
					background-color: #0091ff;
					color: #fff;
					border-radius:0.2rem ;
				}
			}
		}

		
	}
</style>
